<template>
    <div class="content-list">
        <div
            class="content"
            v-for="video in homeStore.videoList"
            :key="video.id"
        >
            <Card :video="video"></Card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import homeApi, {
    type VideoListModel,
    type ContentModel,
} from "@/api/mockHome";
import useHomeStore from "@/stores/modules/home";
const homeStore = useHomeStore();

const VideoList = ref<ContentModel[]>([]);

const getVideos = async () => {
    try {
        const result = await homeApi.getDynamic();
        VideoList.value = result.content;

        console.log(result);
    } catch (error) {
        console.log(error);
    }
};

onMounted(() => {
    getVideos();
    homeStore.getDynamic();
});
</script>

<style scoped lang="scss">
.content-list {
    display: flex;
    flex-wrap: wrap;
    // margin-top: 10px;
    .content {
        margin-right: 20px;
        &:nth-child(5n) {
            margin-right: 0;
        }
        margin-bottom: 20px;
    }
}
</style>
